<!DOCTYPE html>
<html lang="en">

<head>
    <title>Unit test for tinyform.data.js</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        var win = window;
    </script>
    <!--<script src="../node_modules/jquery/dist/jquery.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="../src/tinyform.core.js"></script>
    <script src="../src/tinyform.data.js"></script>
    <link href="../node_modules/qunitjs/qunit/qunit.css" rel="stylesheet">
</head>

<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <div class="container">
        <form id="form">
            <ol>
                <li>
                    <label for="">文本框</label>
                    <input type="text" name="text">
                </li>
                <li>
                    <label for="">单选按钮</label>
                    <input type="radio" name="radio" value="radio1"> radio1

                    <input type="radio" name="radio" value="radio2"> radio2
                </li>
                <li>
                    <label for="">复选框</label>
                    <input type="checkbox" name="checkbox">
                </li>
                <li>
                    <label for="">下拉框(单选)</label>
                    <select name="select1" id="">
                        <option value="1">第1项</option>
                        <option value="2">第2项</option>
                        <option value="3">第3项</option>
                    </select>
                </li>
                <li>
                    <label for="">下拉框(多选)</label>
                    <select name="select2" id="" multiple="multiple">
                        <option value="1">第1项</option>
                        <option value="2">第2项</option>
                        <option value="3">第3项</option>
                    </select>
                </li>
                <li>
                    <label for="">多行文本框</label>
                    <textarea rows="" cols="" name="textarea"></textarea>
                </li>
            </ol>
        </form>
    </div>
    <script src="../node_modules/qunitjs/qunit/qunit.js"></script>
    <script>
        var form = TinyForm('#form', {
            checkbox: ['选中', '未选中'],
			jquery3: true
        });

        QUnit.test("设置文本框的值", function(assert) {
            var expected = 'textboxvalue';
            form.setData(expected, 'text');
            assert.equal(form.getData('text'), expected, "文本框的值=textboxvalue");
        });

        QUnit.test('设置radio的值1', function(assert) {
            var expected = 'radio1';
            form.setData(expected, 'radio');
            assert.equal(form.getData('radio'), expected, "设置radio的值=radio1");
        });

        QUnit.test('设置radio的值2', function(assert) {
            var expected = 'radio2';
            form.setData(expected, 'radio');
            assert.equal(form.getData('radio'), expected, "设置radio的值=radio2");
        });

        QUnit.test('获取checkbox的值', function(assert) {
            var expected = '未选中';
            assert.equal(form.getData('checkbox'), expected, "获取checkbox的值=未选中");
        });

        QUnit.test('设置checkbox的值', function(assert) {
            var expected = '选中';
            form.setData(expected, 'checkbox');
            assert.equal(form.getData('checkbox'), expected, "设置checkbox的值=选中");
        });

        QUnit.test('设置下拉框(单选)的值', function(assert) {
            var expected = 2;
            form.setData(expected, 'select1');
            assert.equal(form.getData('select1'), expected, "设置下拉框(单选)的值=2");
        });

        QUnit.test('设置下拉框(多选)的值', function(assert) {
            var expected = ["1", "3"];
            form.setData(expected, 'select2');
            assert.deepEqual(form.getData('select2'), expected, "设置下拉框(多选)的值=[1, 3]");
        });

        QUnit.test("设置多行文本框的值", function(assert) {
            var expected = 'textareavalue';
            form.setData(expected, 'textarea');
            assert.equal(form.getData('textarea'), expected, "设置多行文本框的值=textareavalue");
        });

        QUnit.test('重置表单', function(assert) {
            var expected = {
                "text": "",
                "radio": undefined,
                "checkbox": "未选中",
                "select1": "1",
                "select2": null,
                "textarea": ""
            };
            form.reset();
            assert.deepEqual(form.getData(), expected, "重置表单");
        });
    </script>
</body>

</html>